<script setup>
import {reactive, watch} from "vue"
import {defaultNoteStyle} from './plugin.js'
import {fontFamilies} from '@/components/logic-flow-mvp/constant'
import {defaultColors} from '@/components/logic-flow-mvp/constant/index.js'

const props = defineProps({
  visible: Boolean,
  nodeStyle: Object
})

const emits = defineEmits(['update:visible', 'setStyle'])

const styleValue = reactive({...defaultNoteStyle})

watch(() => props.nodeStyle, (value) => {
  Object.keys(value).forEach(key => {
    styleValue[key] = value[key]
  })
}, {deep: true})

const handleClose = () => {
  emits('update:visible', false)
}

const setNoteStyle = (sk, sv) => {
  emits('setStyle', {styleKey: sk, styleValue: sv})
}

const setClickStyle = (sk, sv) => {
  styleValue[sk] = sv
  setNoteStyle(sk, sv)
}

const borderStyles = [
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="none"></line></svg>',
    label: '实线',
    value: 'none'
  },
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="5,5"></line></svg>',
    label: '虚线1',
    value: '5,5'
  },
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="10,10"></line></svg>',
    label: '虚线2',
    value: '10,20'
  },
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="20,10,5,5,5,10"></line></svg>',
    label: '虚线3',
    value: '20,10,5,5,5,10'
  },
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="5, 5, 1, 5"></line></svg>',
    label: '虚线4',
    value: '5, 5, 1, 5'
  },
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="15, 10, 5, 10, 15"></line></svg>',
    label: '虚线5',
    value: '15, 10, 5, 10, 15'
  },
  {
    icon: '<svg data-v-cb9581b2="" width="120" height="34"><line data-v-cb9581b2="" x1="10" y1="17" x2="110" y2="17" stroke-width="2" stroke="currentColor" stroke-dasharray="1, 5"></line></svg>',
    label: '虚线6',
    value: '1,5'
  }
]

const borderExt = [
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 4 12 L 4 3 L 56 3 L 56 21 L 4 21 L 4 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '矩形',
    value: 'rectangle',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 4 12 L 30 3 L 56 12 L 30 21 L 4 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '菱形',
    value: 'diamond',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 10 3 L 56 3 L 50 21 L 4 21 L 10 3 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '平行四边形',
    value: 'parallelogram',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 13 3 L 47 3 A 9 9 0, 0 1 47 21 L 13 21 A 9 9 0, 0 1 13 3 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '圆角矩形',
    value: 'roundedRectangle',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 4 12 L 4 9 L 10 3 L 50 3 L 56 9 L 56 15 L 50 21 L 10 21 L 4 15 L 4 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '八角矩形',
    value: 'octagonalRectangle',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 4 12 L 10 3 L 50 3 L 56 12 L 50 21 L 10 21 L 4 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '外三角矩形',
    value: 'outerTriangularRectangle',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 10 12 L 4 3 L 56 3 L 50 12 L 56 21 L 4 21 L 10 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '内三角矩形',
    value: 'innerTriangularRectangle',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 4 12 A 26 9 0, 1, 0 30 3 A 26 9 0, 0, 0 4 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '椭圆行',
    value: 'ellipse',
  },
  {
    icon: '<svg data-v-cb9581b2="" width="60" height="26" style="margin-top: 5px;"><path data-v-cb9581b2="" d="M 21 12 A 9 9 0, 1, 0 30 3 A 9 9 0, 0, 0 21 12 Z" fill="none" stroke="currentColor" stroke-width="2"></path></svg>',
    label: '圆行',
    value: 'circle',
  }
]

</script>

<template>
  <el-drawer
      :model-value="visible"
      show-close
      :append-to-body="true"
      title="节点样式"
      @close="handleClose"
      :size="300"
  >
    <el-form :model="styleValue">
      <h4>文字</h4>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="字体" label-position="right">
            <el-select
                v-model="styleValue.fontFamily"
                @change="(val) => {setNoteStyle('fontFamily', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="family in fontFamilies"
                  :value="family.value"
                  :label="family.label"
              >
                <template #default>
                  <span :style="{fontFamily: family.value}">{{ family.label }}</span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字号" label-position="right">
            <el-select
                v-model="styleValue.fontSize"
                @change="(val) => {setNoteStyle('fontSize', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="size in [10, 12, 14, 16, 18, 24, 32, 48]"
                  :value="size"
                  :label="size"
              >
                <template #default>
                  <span :style="{fontSize: `${size}px`}">{{ size }}</span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行高" label-position="right">
            <el-select
                v-model="styleValue.fontSize"
                @change="(val) => {setNoteStyle('lineHeight', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="height in [1, 1.5, 2, 2.5, 3, 3.5, 4]"
                  :value="height"
                  :label="height"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="flex justify-content-between">
            <el-popover
                placement="bottom"
                trigger="hover"
                title="字体颜色"
                :width="281"
            >
              <template #default>
                <div class="color-selector">
                  <span
                      v-for="c in defaultColors"
                      @click="setClickStyle('color', c)"
                  >
                    <span
                        :style="{backgroundColor: c}"
                    />
                  </span>
                </div>
                更多颜色：
                <el-color-picker
                    @change="(val) => {setNoteStyle('color', val)}"
                    v-model="styleValue.color"
                    @click.stop="() => {}"
                    show-alpha
                    :teleported="false"
                    color-format="rgb"
                />
              </template>
              <template #reference>
                <el-button class="custom-size" plain type="info">
                  <template #default>
                    <span :style="{color: styleValue.color, fontWeight: 'bold'}">A</span>
                  </template>
                </el-button>
              </template>
            </el-popover>
            <el-tooltip
                effect="dark"
                content="加粗"
            >
              <el-button
                  class="custom-size"
                  plain
                  :type="styleValue.fontWeight === 'bold' ? 'primary' : 'info'"
                  @click="setClickStyle('fontWeight', styleValue.fontWeight === 'bold' ? 'normal' : 'bold')"
              >
                <span style="font-weight: bold">B</span>
              </el-button>
            </el-tooltip>
            <el-tooltip
                effect="dark"
                content="斜体"
            >
              <el-button
                  class="custom-size"
                  plain
                  :type="styleValue.fontStyle === 'italic' ? 'primary' : 'info'"
                  @click="setClickStyle('fontStyle', styleValue.fontStyle === 'italic' ? 'normal' : 'italic')"
              >
                <span style="font-style: italic; font-weight: bold">I</span>
              </el-button>
            </el-tooltip>
            <el-popover
                placement="bottom"
                trigger="hover"
                title="划线"
                :width="295"
            >
              <template #default>
                <el-radio-group
                    v-model="styleValue.textDecoration"
                    @change="(val) => setNoteStyle('textDecoration', val)"
                >
                  <el-radio-button label="无" value="none"/>
                  <el-radio-button label="下划线" value="underline"/>
                  <el-radio-button label="中划线" value="line-through"/>
                  <el-radio-button label="上划线" value="overline"/>
                </el-radio-group>
              </template>
              <template #reference>
                <el-button class="custom-size" plain type="info">
                  <template #default>
                    <span
                        :style="{textDecoration: styleValue.textDecoration, lineHeight: 1.5, fontWeight: 'bold'}"
                    >U</span>
                  </template>
                </el-button>
              </template>
            </el-popover>
          </div>
        </el-col>
      </el-row>
      <h4 class="margin-top-20">边框</h4>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="颜色" label-position="right">
            <el-popover
                placement="bottom"
                trigger="hover"
                title="边框颜色"
                :width="281"
            >
              <template #default>
                <div class="color-selector">
                  <span
                      v-for="c in defaultColors"
                      @click="setClickStyle('borderColor', c)"
                  >
                    <span
                        :style="{backgroundColor: c}"
                    />
                  </span>
                </div>
                更多颜色：
                <el-color-picker
                    @change="(val) => {setNoteStyle('borderColor', val)}"
                    v-model="styleValue.borderColor"
                    @click.stop="() => {}"
                    show-alpha
                    :teleported="false"
                    color-format="rgb"
                />
              </template>
              <template #reference>
                <el-button :color="styleValue.borderColor" class="custom-size pw-100">&nbsp;</el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="样式" label-position="right">
            <el-select
                v-model="styleValue.borderDasharray"
                @change="(val) => {setNoteStyle('borderDasharray', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="b in borderStyles"
                  :value="b.value"
                  :label="b.label"
              >
                <template #default>
                  <span v-html="b.icon"></span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽度" label-position="right">
            <el-select
                v-model="styleValue.borderWidth"
                @change="(val) => {setNoteStyle('borderWidth', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="w in [0,1,2,3,4,5,6,7]"
                  :value="w"
                  :label="w"
              >
                <template #default>
                  <span v-if="w === 0">0</span>
                  <span v-else :style="{display: 'block', marginTop: '15px', borderTop: `${w}px solid #000`}"></span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="圆角" label-position="right">
            <el-select
                v-model="styleValue.borderRadius"
                @change="(val) => {setNoteStyle('borderRadius', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="r in [0,1,2,3,4,5,6,7,8,9,10]"
                  :value="r"
                  :label="r"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="margin-top-20">背景</h4>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="颜色" label-position="right">
            <el-popover
                placement="bottom"
                trigger="hover"
                title="背景颜色"
                :width="281"
            >
              <template #default>
                <div class="color-selector">
                  <span
                      v-for="c in defaultColors"
                      @click="setClickStyle('fillColor', c)"
                  >
                    <span
                        :style="{backgroundColor: c}"
                    />
                  </span>
                </div>
                更多颜色：
                <el-color-picker
                    @change="(val) => {setNoteStyle('fillColor', val)}"
                    v-model="styleValue.fillColor"
                    @click.stop="() => {}"
                    show-alpha
                    :teleported="false"
                    color-format="rgb"
                />
              </template>
              <template #reference>
                <el-button :color="styleValue.fillColor" class="custom-size pw-100">&nbsp;</el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="渐变色">
            <el-checkbox v-model="styleValue.gradientStyle" @change="(val) => setClickStyle('gradientStyle', val)" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起始">
            <el-popover
                placement="bottom"
                trigger="hover"
                title=" "
                :width="281"
            >
              <template #default>
                <div class="color-selector">
                  <span
                      v-for="c in defaultColors"
                      @click="setClickStyle('startColor', c)"
                  >
                    <span
                        :style="{backgroundColor: c}"
                    />
                  </span>
                </div>
                更多颜色：
                <el-color-picker
                    @change="(val) => {setNoteStyle('startColor', val)}"
                    v-model="styleValue.startColor"
                    @click.stop="() => {}"
                    show-alpha
                    :teleported="false"
                    color-format="rgb"
                />
              </template>
              <template #reference>
                <el-button :color="styleValue.startColor" class="custom-size pw-100">&nbsp;</el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束">
            <el-popover
                placement="bottom"
                trigger="hover"
                title=" "
                :width="281"
            >
              <template #default>
                <div class="color-selector">
                  <span
                      v-for="c in defaultColors"
                      @click="setClickStyle('endColor', c)"
                  >
                    <span
                        :style="{backgroundColor: c}"
                    />
                  </span>
                </div>
                更多颜色：
                <el-color-picker
                    @change="(val) => {setNoteStyle('endColor', val)}"
                    v-model="styleValue.endColor"
                    @click.stop="() => {}"
                    show-alpha
                    :teleported="false"
                    color-format="rgb"
                />
              </template>
              <template #reference>
                <el-button :color="styleValue.endColor" class="custom-size pw-100">&nbsp;</el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="margin-top-20">形状</h4>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="形状" label-position="right">
            <el-select
                v-model="styleValue.shape"
                @change="(val) => {setNoteStyle('shape', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="e in borderExt"
                  :value="e.value"
                  :label="e.label"
              >
                <template #default>
                  <span v-html="e.icon"></span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="margin-top-20">线条</h4>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="颜色" label-position="right">
            <el-popover
                placement="bottom"
                trigger="hover"
                title="边框颜色"
                :width="281"
            >
              <template #default>
                <div class="color-selector">
                  <span
                      v-for="c in defaultColors"
                      @click="setClickStyle('lineColor', c)"
                  >
                    <span
                        :style="{backgroundColor: c}"
                    />
                  </span>
                </div>
                更多颜色：
                <el-color-picker
                    @change="(val) => {setNoteStyle('lineColor', val)}"
                    v-model="styleValue.lineColor"
                    @click.stop="() => {}"
                    show-alpha
                    :teleported="false"
                    color-format="rgb"
                />
              </template>
              <template #reference>
                <el-button :color="styleValue.lineColor" class="custom-size pw-100">&nbsp;</el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="样式" label-position="right">
            <el-select
                v-model="styleValue.lineDasharray"
                @change="(val) => {setNoteStyle('lineDasharray', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="b in borderStyles"
                  :value="b.value"
                  :label="b.label"
              >
                <template #default>
                  <span v-html="b.icon"></span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽度" label-position="right">
            <el-select
                v-model="styleValue.lineWidth"
                @change="(val) => {setNoteStyle('lineWidth', val)}"
                class="custom-size"
            >
              <el-option
                  v-for="w in [0,1,2,3,4,5,6,7]"
                  :value="w"
                  :label="w"
              >
                <template #default>
                  <span v-if="w === 0">0</span>
                  <span v-else :style="{display: 'block', marginTop: '15px', borderTop: `${w}px solid #000`}"></span>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="margin-top-20">节点内边距</h4>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="水平">
            <el-slider v-model="styleValue.paddingX" :min="0" :max="100"
                       @change="(val) => {setNoteStyle('paddingX', val)}"/>
          </el-form-item>
          <el-form-item label="垂直">
            <el-slider v-model="styleValue.paddingY" :min="0" :max="100"
                       @change="(val) => {setNoteStyle('paddingY', val)}"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-drawer>
</template>

<style lang="scss">
$c: #CCC;
$t: transparent;

.custom-size {
  height: 26px !important;

  & > div {
    min-height: 26px !important;
  }
}

.color-selector {
  display: flex;
  flex-wrap: wrap;
  background: #EFEFEF;
  padding-top: 5px;
  padding-left: 5px;

  & > span {
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: linear-gradient(45deg, $c 25%, $t 25%), linear-gradient(135deg, $c 25%, $t 25%), linear-gradient(45deg, $t 75%, $c 75%), linear-gradient(135deg, $t 75%, $c 75%);
    background-position: 0 0, 6px 0, 6px -6px, 0 6px;
    background-size: 12px 12px;

    & > span {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>